<template>
    <div class="page-container index-container">
        <div class="info-part">
            <div class="title">
                <h1>钱塘新区</h1>
                <span>分析 / 评价 / 决策</span>
            </div>
            <div class="part">
                <div>
                    <div class="liStatics">
                        <div class="name">综合指数</div>
                        <div class="score">3.72</div>
                    </div>
                    <div class="imgbox"></div>
                </div>
                <div>
                    <div class="liStatics">
                        <div class="name">均衡系数</div>
                        <div class="score">0.15</div>
                    </div>
                    <div class="imgbox"></div>
                </div>
            </div>
        </div>
        <div class="m-min-mainBox">

            <div class="gen-row clearfix">
                <div class="mainTab clearfix">
                    <div class="activeBg" ref="activeBg"></div>
                    <div class="tab" :class="{'activ':index==activeTab}" v-for="(item,index) in tabList" @click="changeTab(index)">{{item}}</div>
                </div>
            </div>

            <div class="gen-row pdt40">
            <div class="per3-genBox gen-shadow u-flex_col">
                <div class="tit">学校创新发展</div>
                <div class="u-flex" style="padding:0 40px 40px 10px;">
                    <!-- <u-barEchart
                        :keyId="'thirdhis1'" 
                        :legend="legendList1" :list="list1" disLegend :yAxisName="'负担值'">
                    </u-barEchart> -->
                    <u-lineEchart 
					:keyId="'hisdif1'" 
					:legend="legendList1" :list="list1" disLegend fontNomal yAxisName="评价指数">
				</u-lineEchart>
                </div>
            </div>
            <div class="per3-genBox gen-shadow u-flex_col">
                <div class="tit">教师专业能力</div>
                <div class="u-flex" style="padding:0 40px 20px 10px;">
                    <u-barEchart
                        :keyId="'hisdif2'" :barWidth="40"
                        :legend="legendList2" :list="list2" disLegend fontNomal yAxisName="评价指数">
                    </u-barEchart>
                </div>
            </div>
            <div class="per3-genBox gen-shadow u-flex_col">
                <div class="tit">学生综合素质发展</div>
                <div class="u-flex" style="padding:0 40px 20px 10px;">
                    <u-lineEchart 
					:keyId="'hisdif3'" 
					:legend="legendList3" :list="list3" disLegend fontNomal yAxisName="评价指数" smooth>
                    </u-lineEchart>
                </div>
            </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            tabList:['一级维度','二级维度','三级维度'],
            activeTab:0,
            legendList1:[
                {name:'评价内容',color:'#00cd86',areaStyleColor:"#00cd86"},
            ],
            list1:[
                {name:"2018年",value:[4.22]},
                {name:"2019年",value:[2.85]},
                {name:"2020年",value:[4.95]},
            ],
            legendList2:[
                {name:'评价内容',min:0,max:5,color:'#23c5a2',itemcolor:['#2dd681','#23c5a2']},
            ],
            list2:[
                {name:"2018年",value:[4.25]},
                {name:"2019年",value:[4.51]},
                {name:"2020年",value:[4.88]},
            ],
            legendList3:[
                {name:'评价内容',color:'#00cd86',areaStyleColor:"#00cd86"},
            ],
            list3:[
                {name:"2018年",value:[3.22]},
                {name:"2019年",value:[4.85]},
                {name:"2020年",value:[4.18]},
            ],
        }
    },
    methods:{
        changeTab(index){
            this.activeTab = index;
            this.$refs['activeBg'].style.left = (index*150) + "px";
        }
        
    }
}
</script>

<style lang="scss" scoped>
.per3-genBox{
    float: left;
    width: 31%;
    height: 450px;
    margin-right: 2.3%;
    border-radius: 20px;
    background: #FFF;
    overflow: hidden;
}
.per3-genBox{
    .tit{
        width: 100%;
        padding: 20px 30px;
        font-size: 18px;
        color: #333333;
        font-weight: bold;
    }
}
</style>
